import { useState, useTransition } from 'react';
import './App.css';

  /*
  useTransition 是 React 中的一个 Hook，用于优化用户体验，特别是在处理耗时的状态更新时。它可以帮助你区分紧急更新（如用户输入）和非紧急更新（如数据加载），从而提升应用的响应性和流畅性。
*/
function App() {
  console.log('render app');
  const [val, setVal] = useState('');
  const [list, setList] = useState<any>([]);

  /**
   * 调用 useTransition 钩子，它会返回一个包含两个元素的数组：isPending 和 startTransition。
    isPending 是一个布尔值，表示当前是否有正在进行的过渡操作。
    startTransition 是一个函数，用于包裹那些可能需要一些时间来完成的状态更新操作。
   */
  const [isPendding, startTransition] = useTransition()

  const handleChange = (e:any) => {
    setVal(e.target.value);
    // startTransition 是一个函数，用于包裹那些可能需要一些时间来完成的状态更新操作
    // isPending 会在 startTransition 被调用时变为 true，并在状态更新完成后变为 false
    startTransition(() => {
      const newList = [];
      for (let i = 0; i < 8000; i++) {
        newList.push(e.target.value + i);
      }
      setList(newList);
    })
  };

  return (
    <>
      <div className='card'>
        <h1>useRef 使用方法</h1>
        <input type="text" onChange={handleChange} className='red' value={val} />
        {
          isPendding ? (
            <p>加载中</p>
          ) : (
            list.map((item:any, index:number) => (
              <div key={index}>{val}</div>
            ))
          )
        }
        
      </div>
    </>
  );
}

export default App;